റിയാക്ട് എറർ ബൗണ്ടറി എറർ കാറ്റഗറൈസേഷൻ: ഒരു സമഗ്രമായ ഗൈഡ്

കരുത്തുറ്റതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ റിയാക്ട് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിലെ ഒരു പ്രധാന ഘടകമാണ് എറർ ഹാൻഡ്‌ലിംഗ്. റെൻഡറിംഗ് സമയത്ത് സംഭവിക്കുന്ന പിശകുകൾ ഭംഗിയായി കൈകാര്യം ചെയ്യാൻ റിയാക്ടിന്റെ എറർ ബൗണ്ടറികൾ സഹായിക്കുമെങ്കിലും, വിവിധ തരം പിശകുകളെ എങ്ങനെ തരംതിരിക്കാമെന്നും പ്രതികരിക്കാമെന്നും മനസ്സിലാക്കുന്നത് ഒരു മികച്ച ആപ്ലിക്കേഷൻ നിർമ്മിക്കുന്നതിന് അത്യന്താപേക്ഷിതമാണ്. ഈ ഗൈഡ് എറർ ബൗണ്ടറികൾക്കുള്ളിലെ എറർ കാറ്റഗറൈസേഷന്റെ വിവിധ സമീപനങ്ങൾ പര്യവേക്ഷണം ചെയ്യുകയും, നിങ്ങളുടെ എറർ മാനേജ്മെൻ്റ് തന്ത്രം മെച്ചപ്പെടുത്തുന്നതിനുള്ള പ്രായോഗിക ഉദാഹരണങ്ങളും ഉൾക്കാഴ്ചകളും നൽകുന്നു.

എന്താണ് റിയാക്ട് എറർ ബൗണ്ടറികൾ?

റിയാക്ട് 16-ൽ അവതരിപ്പിച്ച എറർ ബൗണ്ടറികൾ, അവയുടെ ചൈൽഡ് കമ്പോണന്റ് ട്രീയിൽ എവിടെയും സംഭവിക്കുന്ന ജാവാസ്ക്രിപ്റ്റ് പിശകുകൾ കണ്ടെത്തുകയും, അവ ലോഗ് ചെയ്യുകയും, കമ്പോണന്റ് ട്രീ മുഴുവൻ ക്രാഷ് ആകുന്നതിനു പകരം ഒരു ഫാൾബാക്ക് UI പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്ന റിയാക്ട് കമ്പോണന്റുകളാണ്. അവ കമ്പോണന്റുകൾക്ക് വേണ്ടിയുള്ള ഒരു try...catch ബ്ലോക്ക് പോലെ പ്രവർത്തിക്കുന്നു.

എറർ ബൗണ്ടറികളുടെ പ്രധാന സവിശേഷതകൾ:

• കമ്പോണന്റ്-ലെവൽ എറർ ഹാൻഡ്‌ലിംഗ്: നിർദ്ദിഷ്ട കമ്പോണന്റ് സബ്ട്രീകളിൽ പിശകുകളെ വേർതിരിക്കുന്നു.
• ഗ്രേസ്ഫുൾ ഡിഗ്രഡേഷൻ: ഒരൊറ്റ കമ്പോണന്റ് പിശക് കാരണം ആപ്ലിക്കേഷൻ മുഴുവനും ക്രാഷ് ആകുന്നത് തടയുന്നു.
• നിയന്ത്രിത ഫാൾബാക്ക് UI: ഒരു പിശക് സംഭവിക്കുമ്പോൾ ഉപയോക്താവിന് സൗഹൃദപരമായ സന്ദേശമോ ബദൽ ഉള്ളടക്കമോ പ്രദർശിപ്പിക്കുന്നു.
• എറർ ലോഗിംഗ്: പിശകിന്റെ വിവരങ്ങൾ ലോഗ് ചെയ്തുകൊണ്ട് എറർ ട്രാക്കിംഗിനും ഡീബഗ്ഗിംഗിനും സൗകര്യമൊരുക്കുന്നു.

എന്തിന് എറർ ബൗണ്ടറികളിൽ പിശകുകളെ തരംതിരിക്കണം?

പിശകുകൾ കണ്ടെത്തുന്നത് മാത്രം മതിയാവില്ല. ഫലപ്രദമായ എറർ ഹാൻഡ്‌ലിംഗിന് എന്താണ് തെറ്റ് സംഭവിച്ചതെന്ന് മനസ്സിലാക്കുകയും അതിനനുസരിച്ച് പ്രതികരിക്കുകയും വേണം. എറർ ബൗണ്ടറികളിൽ പിശകുകളെ തരംതിരിക്കുന്നത് നിരവധി ഗുണങ്ങൾ നൽകുന്നു:

• ലക്ഷ്യം വെച്ചുള്ള എറർ ഹാൻഡ്‌ലിംഗ്: വിവിധ തരം പിശകുകൾക്ക് വ്യത്യസ്ത പ്രതികരണങ്ങൾ ആവശ്യമായി വന്നേക്കാം. ഉദാഹരണത്തിന്, ഒരു നെറ്റ്‌വർക്ക് പിശകിന് വീണ്ടും ശ്രമിക്കാനുള്ള സംവിധാനം വേണ്ടിവരുമ്പോൾ, ഒരു ഡാറ്റാ വാലിഡേഷൻ പിശകിന് ഉപയോക്താവിന്റെ ഇൻപുട്ട് തിരുത്തൽ ആവശ്യമായി വന്നേക്കാം.
• മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവം: പിശകിന്റെ തരം അനുസരിച്ച് കൂടുതൽ വിവരദായകമായ പിശക് സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കുക. "എന്തോ പിശക് സംഭവിച്ചു" എന്ന പൊതുവായ സന്ദേശത്തേക്കാൾ ഒരു നെറ്റ്‌വർക്ക് പ്രശ്നമോ അസാധുവായ ഇൻപുട്ടോ സൂചിപ്പിക്കുന്ന ഒരു പ്രത്യേക സന്ദേശം കൂടുതൽ സഹായകമാണ്.
• മെച്ചപ്പെട്ട ഡീബഗ്ഗിംഗ്: പിശകുകളെ തരംതിരിക്കുന്നത് ഡീബഗ്ഗിംഗിനും പ്രശ്നങ്ങളുടെ മൂലകാരണം കണ്ടെത്തുന്നതിനും വിലയേറിയ സന്ദർഭം നൽകുന്നു.
• സജീവമായ നിരീക്ഷണം: ആവർത്തിച്ചുള്ള പ്രശ്നങ്ങൾ തിരിച്ചറിയുന്നതിനും പരിഹാരങ്ങൾക്ക് മുൻഗണന നൽകുന്നതിനും വ്യത്യസ്ത തരം പിശകുകളുടെ ആവൃത്തി ട്രാക്ക് ചെയ്യുക.
• തന്ത്രപരമായ ഫാൾബാക്ക് UI: പിശകിനെ ആശ്രയിച്ച് വ്യത്യസ്ത ഫാൾബാക്ക് UI-കൾ പ്രദർശിപ്പിക്കുക, അതുവഴി ഉപയോക്താവിന് കൂടുതൽ പ്രസക്തമായ വിവരങ്ങളോ പ്രവർത്തനങ്ങളോ നൽകുന്നു.

എറർ കാറ്റഗറൈസേഷനുള്ള സമീപനങ്ങൾ

റിയാക്ട് എറർ ബൗണ്ടറികളിൽ പിശകുകളെ തരംതിരിക്കുന്നതിന് നിരവധി സാങ്കേതിക വിദ്യകൾ ഉപയോഗിക്കാം:

1. instanceof ഉപയോഗിച്ച്

instanceof ഓപ്പറേറ്റർ ഒരു ഒബ്ജക്റ്റ് ഒരു പ്രത്യേക ക്ലാസിന്റെ ഇൻസ്റ്റൻസാണോ എന്ന് പരിശോധിക്കുന്നു. ബിൽറ്റ്-ഇൻ അല്ലെങ്കിൽ കസ്റ്റം എറർ ടൈപ്പുകളെ അടിസ്ഥാനമാക്കി പിശകുകളെ തരംതിരിക്കുന്നതിന് ഇത് ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം:

class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // അടുത്ത റെൻഡറിൽ ഫോൾബാക്ക് UI കാണിക്കുന്നതിനായി സ്റ്റേറ്റ് അപ്ഡേറ്റ് ചെയ്യുക.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // നിങ്ങൾക്ക് ഈ പിശക് ഒരു എറർ റിപ്പോർട്ടിംഗ് സേവനത്തിലേക്ക് ലോഗ് ചെയ്യാനും കഴിയും
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // നിങ്ങൾക്ക് ഇഷ്ടമുള്ള ഏത് കസ്റ്റം ഫോൾബാക്ക് UI-യും റെൻഡർ ചെയ്യാൻ കഴിയും
      let errorMessage = "എന്തോ പിശക് സംഭവിച്ചു.";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "ഒരു നെറ്റ്‌വർക്ക് പിശക് സംഭവിച്ചു. ദയവായി നിങ്ങളുടെ കണക്ഷൻ പരിശോധിച്ച് വീണ്ടും ശ്രമിക്കുക.";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "ഒരു വാലിഡേഷൻ പിശക് സംഭവിച്ചു. ദയവായി നിങ്ങളുടെ ഇൻപുട്ട് പുനഃപരിശോധിക്കുക.";
      }

      return (
        <div>
          <h2>പിശക്!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

വിശദീകരണം:

• ബിൽറ്റ്-ഇൻ Error ക്ലാസിനെ എക്സ്റ്റൻഡ് ചെയ്തുകൊണ്ട് കസ്റ്റം NetworkError, ValidationError ക്ലാസുകൾ നിർവചിച്ചിരിക്കുന്നു.
• MyErrorBoundary കമ്പോണന്റിന്റെ render മെത്തേഡിൽ, പിടിക്കപ്പെട്ട പിശകിന്റെ തരം പരിശോധിക്കാൻ instanceof ഓപ്പറേറ്റർ ഉപയോഗിക്കുന്നു.
• പിശകിന്റെ തരം അനുസരിച്ച്, ഫാൾബാക്ക് UI-യിൽ ഒരു പ്രത്യേക പിശക് സന്ദേശം പ്രദർശിപ്പിക്കുന്നു.

2. എറർ കോഡുകളോ പ്രോപ്പർട്ടികളോ ഉപയോഗിച്ച്

മറ്റൊരു സമീപനം, എറർ ഒബ്ജക്റ്റിൽ തന്നെ എറർ കോഡുകളോ പ്രോപ്പർട്ടികളോ ഉൾപ്പെടുത്തുക എന്നതാണ്. ഇത് നിർദ്ദിഷ്ട പിശക് സാഹചര്യങ്ങളെ അടിസ്ഥാനമാക്കി കൂടുതൽ സൂക്ഷ്മമായ തരംതിരിക്കലിന് അനുവദിക്കുന്നു.

ഉദാഹരണം:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          const error = new Error("Network request failed");
          error.code = response.status; // ഒരു കസ്റ്റം എറർ കോഡ് ചേർക്കുക
          reject(error);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // അടുത്ത റെൻഡറിൽ ഫോൾബാക്ക് UI കാണിക്കുന്നതിനായി സ്റ്റേറ്റ് അപ്ഡേറ്റ് ചെയ്യുക.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // നിങ്ങൾക്ക് ഈ പിശക് ഒരു എറർ റിപ്പോർട്ടിംഗ് സേവനത്തിലേക്ക് ലോഗ് ചെയ്യാനും കഴിയും
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      let errorMessage = "എന്തോ പിശക് സംഭവിച്ചു.";
      if (this.state.error.code === 404) {
        errorMessage = "വിഭവം കണ്ടെത്താനായില്ല.";
      } else if (this.state.error.code >= 500) {
        errorMessage = "സെർവർ പിശക്. ദയവായി പിന്നീട് വീണ്ടും ശ്രമിക്കുക.";
      }

      return (
        <div>
          <h2>പിശക്!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

വിശദീകരണം:

• fetchData ഫംഗ്ഷൻ എറർ ഒബ്ജക്റ്റിലേക്ക് ഒരു code പ്രോപ്പർട്ടി ചേർക്കുന്നു, അത് HTTP സ്റ്റാറ്റസ് കോഡിനെ പ്രതിനിധീകരിക്കുന്നു.
• MyErrorBoundary കമ്പോണന്റ് നിർദ്ദിഷ്ട പിശക് സാഹചര്യം നിർണ്ണയിക്കാൻ code പ്രോപ്പർട്ടി പരിശോധിക്കുന്നു.
• എറർ കോഡിനെ അടിസ്ഥാനമാക്കി വ്യത്യസ്ത പിശക് സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കുന്നു.

3. ഒരു കേന്ദ്രീകൃത എറർ മാപ്പിംഗ് ഉപയോഗിച്ച്

സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകൾക്ക്, ഒരു കേന്ദ്രീകൃത എറർ മാപ്പിംഗ് പരിപാലിക്കുന്നത് കോഡിന്റെ ഓർഗനൈസേഷനും പരിപാലനക്ഷമതയും മെച്ചപ്പെടുത്തും. ഇതിൽ, എറർ ടൈപ്പുകളെയോ കോഡുകളെയോ നിർദ്ദിഷ്ട പിശക് സന്ദേശങ്ങളുമായും ഹാൻഡ്‌ലിംഗ് ലോജിക്കുമായും മാപ്പ് ചെയ്യുന്ന ഒരു ഡിക്ഷണറിയോ ഒബ്ജക്റ്റോ സൃഷ്ടിക്കുന്നത് ഉൾപ്പെടുന്നു.

ഉദാഹരണം:

const errorMap = {
  "NETWORK_ERROR": {
    message: "ഒരു നെറ്റ്‌വർക്ക് പിശക് സംഭവിച്ചു. ദയവായി നിങ്ങളുടെ കണക്ഷൻ പരിശോധിക്കുക.",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "അസാധുവായ ഇൻപുട്ട്. ദയവായി നിങ്ങളുടെ ഡാറ്റ പുനഃപരിശോധിക്കുക.",
    retry: false,
  },
  404: {
    message: "വിഭവം കണ്ടെത്താനായില്ല.",
    retry: false,
  },
  500: {
    message: "സെർവർ പിശക്. ദയവായി പിന്നീട് വീണ്ടും ശ്രമിക്കുക.",
    retry: true,
  },
  "DEFAULT": {
    message: "എന്തോ പിശക് സംഭവിച്ചു.",
    retry: false,
  },
};

function handleCustomError(errorType) {
    const errorDetails = errorMap[errorType] || errorMap["DEFAULT"];
    return errorDetails;
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // അടുത്ത റെൻഡറിൽ ഫോൾബാക്ക് UI കാണിക്കുന്നതിനായി സ്റ്റേറ്റ് അപ്ഡേറ്റ് ചെയ്യുക.
    const errorDetails = handleCustomError(error.message);
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    // നിങ്ങൾക്ക് ഈ പിശക് ഒരു എറർ റിപ്പോർട്ടിംഗ് സേവനത്തിലേക്ക് ലോഗ് ചെയ്യാനും കഴിയും
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message } = this.state.errorDetails;
      return (
        <div>
          <h2>പിശക്!</h2>
          <p>{message}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorDetails.message}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

function MyComponent(){
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      try {
        throw new Error("NETWORK_ERROR");
      } catch (e) {
        throw e;
      }
    }, []);

    return <div></div>;
}

വിശദീകരണം:

• errorMap ഒബ്ജക്റ്റ്, എറർ ടൈപ്പുകളെയോ കോഡുകളെയോ അടിസ്ഥാനമാക്കി സന്ദേശങ്ങളും റീട്രൈ ഫ്ലാഗുകളും ഉൾപ്പെടെയുള്ള പിശക് വിവരങ്ങൾ സംഭരിക്കുന്നു.
• handleCustomError ഫംഗ്ഷൻ, പിശക് സന്ദേശത്തെ അടിസ്ഥാനമാക്കി errorMap-ൽ നിന്ന് പിശകിന്റെ വിശദാംശങ്ങൾ വീണ്ടെടുക്കുകയും നിർദ്ദിഷ്ട കോഡ് കണ്ടെത്തിയില്ലെങ്കിൽ ഡിഫോൾട്ട് മൂല്യങ്ങൾ നൽകുകയും ചെയ്യുന്നു.
• MyErrorBoundary കമ്പോണന്റ് errorMap-ൽ നിന്ന് ഉചിതമായ പിശക് സന്ദേശം ലഭിക്കാൻ handleCustomError ഉപയോഗിക്കുന്നു.

എറർ കാറ്റഗറൈസേഷനുള്ള മികച്ച രീതികൾ

• വ്യക്തമായ എറർ ടൈപ്പുകൾ നിർവചിക്കുക: നിങ്ങളുടെ ആപ്ലിക്കേഷനായി ഒരു സ്ഥിരതയുള്ള എറർ ടൈപ്പുകളോ കോഡുകളോ സ്ഥാപിക്കുക.
• സന്ദർഭോചിതമായ വിവരങ്ങൾ നൽകുക: ഡീബഗ്ഗിംഗിന് സൗകര്യമൊരുക്കുന്നതിന് പ്രസക്തമായ വിശദാംശങ്ങൾ എറർ ഒബ്ജക്റ്റുകളിൽ ഉൾപ്പെടുത്തുക.
• എറർ ഹാൻഡ്‌ലിംഗ് ലോജിക് കേന്ദ്രീകരിക്കുക: എറർ ഹാൻഡ്‌ലിംഗ് സ്ഥിരമായി കൈകാര്യം ചെയ്യാൻ ഒരു കേന്ദ്രീകൃത എറർ മാപ്പിംഗോ യൂട്ടിലിറ്റി ഫംഗ്ഷനുകളോ ഉപയോഗിക്കുക.
• പിശകുകൾ ഫലപ്രദമായി ലോഗ് ചെയ്യുക: പ്രൊഡക്ഷനിലെ പിശകുകൾ ട്രാക്ക് ചെയ്യാനും വിശകലനം ചെയ്യാനും എറർ റിപ്പോർട്ടിംഗ് സേവനങ്ങളുമായി സംയോജിപ്പിക്കുക. Sentry, Rollbar, Bugsnag എന്നിവ ജനപ്രിയ സേവനങ്ങളാണ്.
• എറർ ഹാൻഡ്‌ലിംഗ് പരീക്ഷിക്കുക: നിങ്ങളുടെ എറർ ബൗണ്ടറികൾ വിവിധ തരം പിശകുകളെ ശരിയായി കൈകാര്യം ചെയ്യുന്നുണ്ടോയെന്ന് പരിശോധിക്കാൻ യൂണിറ്റ് ടെസ്റ്റുകൾ എഴുതുക.
• ഉപയോക്തൃ അനുഭവം പരിഗണിക്കുക: ഉപയോക്താക്കളെ പരിഹാരത്തിലേക്ക് നയിക്കുന്ന വിവരദായകവും ഉപയോക്തൃ-സൗഹൃദവുമായ പിശക് സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കുക. സാങ്കേതിക പദങ്ങൾ ഒഴിവാക്കുക.
• പിശക് നിരക്കുകൾ നിരീക്ഷിക്കുക: ആവർത്തിച്ചുള്ള പ്രശ്നങ്ങൾ തിരിച്ചറിയുന്നതിനും പരിഹാരങ്ങൾക്ക് മുൻഗണന നൽകുന്നതിനും വ്യത്യസ്ത തരം പിശകുകളുടെ ആവൃത്തി ട്രാക്ക് ചെയ്യുക.
• അന്താരാഷ്ട്രവൽക്കരണം (i18n): ഉപയോക്താവിന് പിശക് സന്ദേശങ്ങൾ നൽകുമ്പോൾ, നിങ്ങളുടെ സന്ദേശങ്ങൾ വിവിധ ഭാഷകളെയും സംസ്കാരങ്ങളെയും പിന്തുണയ്ക്കുന്നതിനായി ശരിയായി അന്താരാഷ്ട്രവൽക്കരിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. വിവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യാൻ i18next പോലുള്ള ലൈബ്രറികളോ റിയാക്ടിന്റെ കോൺടെക്സ്റ്റ് API-യോ ഉപയോഗിക്കുക.
• പ്രവേശനക്ഷമത (a11y): നിങ്ങളുടെ പിശക് സന്ദേശങ്ങൾ ഭിന്നശേഷിയുള്ള ഉപയോക്താക്കൾക്ക് പ്രവേശനക്ഷമമാണെന്ന് ഉറപ്പാക്കുക. സ്ക്രീൻ റീഡറുകൾക്ക് അധിക സന്ദർഭം നൽകാൻ ARIA ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുക.
• സുരക്ഷ: പിശക് സന്ദേശങ്ങളിൽ നിങ്ങൾ എന്ത് വിവരങ്ങളാണ് പ്രദർശിപ്പിക്കുന്നത് എന്നതിനെക്കുറിച്ച് ശ്രദ്ധിക്കുക, പ്രത്യേകിച്ച് പ്രൊഡക്ഷൻ എൻവയോൺമെന്റുകളിൽ. ആക്രമണകാരികൾക്ക് ചൂഷണം ചെയ്യാൻ കഴിയുന്ന സെൻസിറ്റീവ് ഡാറ്റ വെളിപ്പെടുത്തുന്നത് ഒഴിവാക്കുക. ഉദാഹരണത്തിന്, അന്തിമ ഉപയോക്താക്കൾക്ക് റോ സ്റ്റാക്ക് ട്രെയ്സുകൾ പ്രദർശിപ്പിക്കരുത്.

ഉദാഹരണ സാഹചര്യം: ഒരു ഇ-കൊമേഴ്‌സ് ആപ്ലിക്കേഷനിലെ API പിശകുകൾ കൈകാര്യം ചെയ്യൽ

ഒരു API-യിൽ നിന്ന് ഉൽപ്പന്ന വിവരങ്ങൾ വീണ്ടെടുക്കുന്ന ഒരു ഇ-കൊമേഴ്‌സ് ആപ്ലിക്കേഷൻ പരിഗണിക്കുക. സാധ്യമായ പിശക് സാഹചര്യങ്ങളിൽ ഇവ ഉൾപ്പെടുന്നു:

• നെറ്റ്‌വർക്ക് പിശകുകൾ: API സെർവർ ലഭ്യമല്ലാത്ത അവസ്ഥയിലോ ഉപയോക്താവിന്റെ ഇൻ്റർനെറ്റ് കണക്ഷൻ തടസ്സപ്പെട്ടാലോ.
• ഓതന്റിക്കേഷൻ പിശകുകൾ: ഉപയോക്താവിന്റെ ഓതന്റിക്കേഷൻ ടോക്കൺ അസാധുവായതോ കാലഹരണപ്പെട്ടതോ ആയാൽ.
• വിഭവം കണ്ടെത്താനായില്ല പിശകുകൾ: അഭ്യർത്ഥിച്ച ഉൽപ്പന്നം നിലവിലില്ലെങ്കിൽ.
• സെർവർ പിശകുകൾ: API സെർവറിന് ഒരു ആന്തരിക പിശക് നേരിടുമ്പോൾ.

എറർ ബൗണ്ടറികളും എറർ കാറ്റഗറൈസേഷനും ഉപയോഗിച്ച്, ആപ്ലിക്കേഷന് ഈ സാഹചര്യങ്ങളെ ഭംഗിയായി കൈകാര്യം ചെയ്യാൻ കഴിയും:

// ഉദാഹരണം (ലളിതമാക്കിയത്)
async function fetchProduct(productId) {
  try {
    const response = await fetch(`/api/products/${productId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("PRODUCT_NOT_FOUND");
      } else if (response.status === 401 || response.status === 403) {
        throw new Error("AUTHENTICATION_ERROR");
      } else {
        throw new Error("SERVER_ERROR");
      }
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      throw new Error("NETWORK_ERROR");
    }
    throw error;
  }
}

class ProductErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    const errorDetails = handleCustomError(error.message); // മുമ്പ് കാണിച്ചതുപോലെ errorMap ഉപയോഗിക്കുക
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message, retry } = this.state.errorDetails;
      return (
        <div>
          <h2>പിശക്!</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>വീണ്ടും ശ്രമിക്കുക</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

വിശദീകരണം:

• fetchProduct ഫംഗ്ഷൻ API പ്രതികരണ സ്റ്റാറ്റസ് കോഡ് പരിശോധിക്കുകയും സ്റ്റാറ്റസിനെ അടിസ്ഥാനമാക്കി നിർദ്ദിഷ്ട എറർ ടൈപ്പുകൾ ത്രോ ചെയ്യുകയും ചെയ്യുന്നു.
• ProductErrorBoundary കമ്പോണന്റ് ഈ പിശകുകൾ കണ്ടെത്തുകയും ഉചിതമായ പിശക് സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു.
• നെറ്റ്‌വർക്ക് പിശകുകൾക്കും സെർവർ പിശകുകൾക്കുമായി, ഒരു "വീണ്ടും ശ്രമിക്കുക" ബട്ടൺ പ്രദർശിപ്പിക്കുന്നു, ഇത് ഉപയോക്താവിനെ അഭ്യർത്ഥന വീണ്ടും ശ്രമിക്കാൻ അനുവദിക്കുന്നു.
• ഓതന്റിക്കേഷൻ പിശകുകൾക്ക്, ഉപയോക്താവിനെ ലോഗിൻ പേജിലേക്ക് റീഡയറക്ട് ചെയ്തേക്കാം.
• വിഭവം കണ്ടെത്താനായില്ല എന്ന പിശകുകൾക്ക്, ഉൽപ്പന്നം നിലവിലില്ലെന്ന് സൂചിപ്പിക്കുന്ന ഒരു സന്ദേശം പ്രദർശിപ്പിക്കുന്നു.

ഉപസംഹാരം

റിയാക്ട് എറർ ബൗണ്ടറികളിൽ പിശകുകളെ തരംതിരിക്കുന്നത് പ്രതിരോധശേഷിയുള്ളതും ഉപയോക്തൃ-സൗഹൃദവുമായ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് അത്യാവശ്യമാണ്. instanceof ചെക്കുകൾ, എറർ കോഡുകൾ, കേന്ദ്രീകൃത എറർ മാപ്പിംഗുകൾ തുടങ്ങിയ സാങ്കേതിക വിദ്യകൾ ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് വിവിധ പിശക് സാഹചര്യങ്ങളെ ഫലപ്രദമായി കൈകാര്യം ചെയ്യാനും മികച്ച ഉപയോക്തൃ അനുഭവം നൽകാനും കഴിയും. നിങ്ങളുടെ ആപ്ലിക്കേഷൻ അപ്രതീക്ഷിത സാഹചര്യങ്ങളെ ഭംഗിയായി കൈകാര്യം ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കാൻ എറർ ഹാൻഡ്‌ലിംഗ്, ലോഗിംഗ്, ടെസ്റ്റിംഗ് എന്നിവയ്ക്കുള്ള മികച്ച രീതികൾ പിന്തുടരാൻ ഓർക്കുക.

ഈ തന്ത്രങ്ങൾ നടപ്പിലാക്കുന്നതിലൂടെ, നിങ്ങളുടെ റിയാക്ട് ആപ്ലിക്കേഷനുകളുടെ സ്ഥിരതയും പരിപാലനക്ഷമതയും ഗണ്യമായി മെച്ചപ്പെടുത്താനും, ഉപയോക്താക്കൾക്ക് അവരുടെ സ്ഥലമോ പശ്ചാത്തലമോ പരിഗണിക്കാതെ സുഗമവും കൂടുതൽ വിശ്വസനീയവുമായ അനുഭവം നൽകാനും കഴിയും.

കൂടുതൽ വിവരങ്ങൾക്ക്:

• റിയാക്ട് എറർ ബൗണ്ടറീസ് ഡോക്യുമെൻ്റേഷൻ
• സെൻട്രിയുടെ റിയാക്ട് 16 എറർ ബൗണ്ടറീസ് ഗൈഡ്
• റോബിൻ വിയറുക്കിന്റെ റിയാക്ട് എറർ ബൗണ്ടറി ട്യൂട്ടോറിയൽ